<template>
  <div class="group-world">
    <div class="header">
      <div>
        <span>应用分组</span>
      </div>
      <div class="header-operation">
        <el-tooltip effect="dark" content="添加" placement="bottom">
          <el-button type="text" @click="addGroup">
            <i class="el-icon-plus"></i>
          </el-button>
        </el-tooltip>
        <el-tooltip effect="dark" :content="isSort ? '关闭排序' : '开启排序'" placement="bottom">
          <el-button type="text" @click="changeSortFlag">
            <i class="el-icon-sort"
              style="transition: transform 0.3s ease-in-out"
              :style="[
                { transform: isSort ? 'rotate(0deg)' : 'rotate(90deg)' },
              ]"
            ></i>
          </el-button>
        </el-tooltip>
      </div>
    </div>
    <div class="group-container">
      <div v-show="isAdd" class="add-container">
        <div class="input-content">
          <el-input
            type="text"
            placeholder="请输入分组名称"
            v-model="groupText"
            maxlength="10"
            show-word-limit
          >
          </el-input>
        </div>
        <div style="margin-left: 10px;">
          <el-tooltip effect="dark" content="确定" placement="bottom">
            <el-button type="text" @click="comfirmAddGroup">
              <i class="el-icon-check"></i>
            </el-button>
          </el-tooltip>
        </div>
        <div style="margin-left: 10px;">
          <el-tooltip effect="dark" content="取消" placement="bottom">
            <el-button type="text" @click="cancelAddGroup">
              <i class="el-icon-close"></i>
            </el-button>
          </el-tooltip>
        </div>
      </div>
      <div 
        class="group-item" 
        :class="{ 'group-item-selected': selectGroupItem && selectGroupItem.id == 0 }"
        @click="handleSelectGroupItem(null)"
      >
        <div class="allGroupItem">
          <div class="titleContainer">
            <i style="margin-left: 10px;" class="el-icon-map-location"></i>
            <span style="margin-left: 10px;">全部应用</span>
          </div>
          <div class="numContainer">
            <span>{{ total }}</span>
          </div>
        </div>
      </div>
      <div id="sortGroup">
        <div 
          class="group-item"
          v-for="item in groupList"
          :key="item.id"
          :class="{ 'group-item-selected': selectGroupItem && selectGroupItem.id == item.id }"
          @click="handleSelectGroupItem(item)"
        >
          <GroupItem 
            :data="item" 
            :isSort="isSort" 
            @edit="handleEditGroup"
            @delete="handleDeleteGroup"
          ></GroupItem>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import GroupItem from './GroupItem.vue'
import moment from 'moment'
import Sortable from 'sortablejs'
export default {
  name:'LeftGroup',
  components: {
    GroupItem
  },
  data() {
    return {
      isSort: false,
      isAdd: false,
      groupText: '',//新增的text
      groupList: [],
      selectGroupItem: {},
    }
  },
  mounted() {
    this.getGroupList()
  },
  computed: {
    total() {
      let num = 0
      this.groupList.forEach(item=>{
        num += item.num
      })
      return num
    }
  },
  methods: {
    moment,
    changeSortFlag() {
      this.isSort = !this.isSort
    },
    getGroupList() {
      this.groupList = [
        { id: 1, name: 'item1', num: 23},
        { id: 2, name: 'item2', num: 10},
        { id: 3, name: 'item3', num: 2},
        { id: 4, name: 'item4', num: 5},
        { id: 5, name: 'item5', num: 3},
        { id: 6, name: 'item6', num: 9},
      ]
      this.handleSelectGroupItem(null)
      this.$nextTick(() => {
        this.createSort()
      })
    },
    addGroup() {
      this.isAdd = true
      this.groupText = ''
    },
    comfirmAddGroup() {
      if(this.groupText?.trim()) {
        this.groupList.push({
          id: moment().valueOf(),
          name: this.groupText.trim(),
          num: 0
        })
        this.isAdd = false
      } else {
        this.$message.error("请输入分组名称")
      }
    },
    cancelAddGroup() {
      this.isAdd = false
    },
    handleSelectGroupItem(item) {
      let spreadItem = {}
      if (item) {
        spreadItem = item
      } else {
        spreadItem = {
          id: 0,
          name: '全部应用',
          num: this.total,
        }
      }
      if(this.selectGroupItem) {
        if (this.selectGroupItem.id != spreadItem.id) {
          this.selectGroupItem = spreadItem
          this.$emit('select', spreadItem)
        }
      } else {
        this.selectGroupItem = spreadItem
        this.$emit('select', spreadItem)
      }
    },
    handleEditGroup(data) {
      let id = data.id
      let newName = data.newName
      for(let i = 0; i< this.groupList.length; i++) {
        if(this.groupList[i].id == id) {
          this.groupList[i].name = newName
          break
        }
      }
    },
    handleDeleteGroup(data) {
      let id = data.id
      let flag = -1
      for(let i = 0; i< this.groupList.length; i++) {
        if(this.groupList[i].id == id) {
          flag = i
          break
        }
      }
      this.groupList.splice(flag, 1)
      if(this.selectGroupItem.id == id) {
        this.handleSelectGroupItem(null)
      }
    },
    createSort() {
      let el = document.getElementById('sortGroup')
      Sortable.create(el, {
        ghostClass: 'sortable-ghost',
        direction: 'horizontal',
        disabled: false,
        removeCloneOnHide: true,
        group: 'group',
        handle: '.handleMove',
        animation: 300,
        onEnd: (evt) => {
          this.cursor = 'grab'
          let oldIndex = evt.oldIndex
          let newIndex = evt.newIndex
          //移动dom节点
          let $li = el.children[newIndex]
          let $oldLi = el.children[oldIndex]
          //先删除移动的节点
          el.removeChild($li)
          //在插入移动的节点到原来的节点，还原移动的操作
          if (newIndex > oldIndex) {
            el.insertBefore($li, $oldLi)
          } else {
            el.insertBefore($li, $oldLi.nextSibling)
          }
          //移动数据
          let list = JSON.parse(JSON.stringify(this.groupList))
          let oldItem = list[oldIndex]
          list.splice(oldIndex, 1)
          list.splice(newIndex, 0, oldItem)
          this.groupList = list
        },
      })
    },
    //父组件调用开始
    transformGroupList() {
      return this.groupList
    }, 
    addOneByNum(groupId) {
      for(let i = 0; i < this.groupList.length; i++) {
        if(this.groupList[i].id == groupId) {
          this.groupList[i].num ++
          break
        }
      }
    },
    deleteOneByNum(item) {
      for(let i = 0; i < this.groupList.length; i++) {
        if(this.groupList[i].id == item.id) {
          if(this.groupList[i].num > 0) {
            this.groupList[i].num --
          }
          break
        }
      }
    },
    //父组件调用结束
  } 
}
</script>

<style lang='less' scoped>
  .group-world {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .header {
      width: 100%;
      height: 51px;
      border-bottom: 1px solid #eee;
      flex-shrink: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 16px;
      padding-right: 16px;
      .header-operation {
        display: flex;
      }
    }
    .group-container {
      flex: 1;
      width: 100%;
      padding: 16px;
      overflow-x: hidden;
      overflow-y: auto;
      .add-container {
        width: 100%;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        .input-content {
          flex: 1;
        }
      }
      .group-item {
        width: 100%;
        height: 40px;
        border-radius: 3px;
        user-select: none;
        cursor: pointer;
        margin-bottom: 8px;
        
        .allGroupItem {
          width: 100%;
          height: 100%;
          padding-right: 8px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .titleContainer {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .numContainer {
            margin-left: 10px;
          }
        }
      }
      .group-item:hover {
        background-color: #e6f0ff;
      }
      .group-item.group-item-selected {
        background-color: #e6f0ff;
      }
    }
  }
</style>